class Taber {
	constructor (cls, evt='click', act='active') {
		this.tab=cls||'.tab-box';
		this.nav='.tab-nav';
		this.cont='.tab-item';
		this.evt=evt;
		this.act=act;

		this.tabs={};//{id,idx[,navs,conts]}
		this.count=0;
		this.init();
	}
	init(){
		let that=this;
		$(this.tab).each(function(ti){
			let idx=$(this).data('nidx');
			that.tabs[ti]={id:ti,idx:idx||0,elem:$(this)};

			$(this).data('tid',ti).find(that.nav).each(function(ni){
				$(this).data('tid',ti).data('nidx', ni);
			});
		});
		this.bindEvent();
	}
	bindEvent(){
		let that=this;
		$(document).on(this.evt, this.nav, function(event){
			event.preventDefault();
			that.showTab($(this));
		});
	}
	getTab(tid){
		return this.tabs[tid];
	}
	showTab(t){
		let that=this;
		/* Act on the event */
		let tid=t.data('tid'),
				idx=t.data('nidx');
		let tab=that.getTab(tid);
		if(tab==undefined||tab==null) return;
		let navs=tab.elem.find(that.nav);
		navs.eq(tab.idx).removeClass(that.act);
		navs.eq(idx).addClass(that.act);

		let conts=tab.elem.find(that.cont);
		conts.eq(tab.idx).removeClass(that.act);
		conts.eq(idx).addClass(that.act);

		tab.idx=idx;
	}	
}

export default Taber;